<template>
	<div class="bindPhone">
	
		<div class="phone">
	
			<div class="phone_left">
	
				<label for="">手机号</label>
	
				<span>{{mobile}}</span>
	
			</div>
	
			<div class="btn_con">
	
				<button v-text="smsBtn" @click="e_send" :disabled="isDisable"></button>
	
			</div>
	
		</div>
	
		<div class="code">
	
			<div class="phone_left">
	
				<label for="">验证码</label>
	
				<input type="text" placeholder="请输入验证码" placeholder-style="font-size:25rpx; padding-left: 20rpx;letter-spacing:5rpx;" v-model="phoneCode">
	
			</div>
	
		</div>
	
		<div class="btn">
	
			<button @click="visable">验证</button>
	
		</div>
	
	</div>
</template>

<script>
	import {
	
		request,
	
		formData
	
	} from '@/wxRequest/requestApi'
	
	
	
	export default {
	
		data() {
	
			return {
	
				sendphone: '',
	
				mobile: '', //手机号
	
				smsBtn: '发送验证码',
	
				smdTimer: null, //发送验证码定时器,
	
				phoneCode: '', //短信验证码
	
				typesLogin: '', //判断是从哪进来授权的
	
				isDisable: false, //防止重复点击
	
			}
	
		},
	
	
	
		methods: {
	
			e_send() {
	
				this.smsTimer()
	
				this.send()
	
			},
	
			/**
	
			 * 微信登录
	
			 */
	
			wxLogin() {
	      console.log(';asdasdasdasadrf')
				let that = this
	
				wx.login({
	
					success: res => {
	
						if (res) {
	console.log('code',res)
							this.fistLogin(res)
	
						}
	
					},
	
				})
	
			},
	
			/**
	
			 * 小程序授权登录第一步
	
			 */
	
			fistLogin(res) {
	console.log('code1',res)
				let getParams = {
	
					url: '/login',
	
					data: {
	
						code: res.code,
	
					},
	
					method: 'POST',
	
				}
	
				this.$JZFormdata(getParams).then(re => {
	console.log('扯淡呢',re)
					if (re.status == 0) {
	
						this.SecondLogin(re)
	
					}
	
				})
	
			},
	
	
	
			/**
	
			 * 小程序授权登录第二步  获取微信用户信息
	
			 */
	
			SecondLogin(firstData) {
	console.log('code3',firstData)
				let that = this
	
				wx.getUserInfo({
	
					success: res => {
	console.log('user',res)
						let mobile = wx.getStorageSync('userPhone')
	
						let getParams = {
	
							url: '/login/userInfo ',
	
							data: {
	
								encryptedData: res.encryptedData,
	
								sessionKey: firstData.data.sessionKey,
	
								iv: res.iv,
	
								relationId: '1',
	
								mobile: mobile,
	
							},
	
							method: 'POST',
	
						}
	
						that.$JZFormdata(getParams).then(re => {
							if (re.status == 0) {
								wx.setStorageSync('accessToken', re.data.accessToken)
								wx.setStorageSync('userId', re.data.userId)
								wx.setStorageSync('username', re.data.username)
								that.userShow = true
								this.$store.state.user.islogin = true
								 console.log('登录判断', )
									wx.navigateTo({
										url: '/pages/shoppingCart/main',
									})
							}
	
						})
	
					},
	
				})
	
			},

	
			//验证
	
			visable() {
	
				var that = this
	
				wx.request({
	
					url: 'http://192.168.2.125:8200/api/validateMessageCode',
	
					header: {
	
						'content-type': 'application/x-www-form-urlencoded'
	
					},
	
					data: {
	
						phoneCode: that.phoneCode,
	
						key: 'checkCode' + that.sendphone,
	
					},
	
					method: 'POST',
	
					success(res) {
	
						console.log('asdasd', res)
	
						if (res.data == false) {
						
							wx.setStorageSync('userPhone', that.sendphone)
								
				if (that.$store.state.user.backRes == true) {
					console.log('进来')
					that.wxLogin()
				}else{
						wx.switchTab({

								url: '/pages/me/main',
	
							})
	
				}
							that.phoneCode = ''
							clearInterval(that.smdTimer)
	
						} else {
	
							wx.showToast({
	
								title: '发送失败',
	
								image: '../../static/images/gantanhao.png',
	
							})
	
						}
	
					},
	
				})
	
			},
	
			// 发送倒计时
	
			smsTimer() {
	
				this.smsBtn = '30s'
	
				var counter = 29
	
				this.smdTimer = setInterval(() => {
	
					if (counter == 0) {
	
						this.isDisable = false
	
						this.smsBtn = '发送验证码'
	
						clearInterval(this.smdTimer)
	
					} else {
	
						this.isDisable = true
	
						this.smsBtn = counter + 's'
	
						counter--
	
					}
	
				}, 1000)
	
			},
	
			//发送
	
			send() {
	
				let that = this
	
				wx.request({
	
					url: 'http://192.168.2.125:8200/api/sendValidateCode',
	
					header: {
	
						'content-type': 'application/x-www-form-urlencoded'
	
					},
	
					data: {
	
						phoneNum: this.sendphone,
	
					},
	
					method: 'POST',
	
					success(res) {
	
						console.log('cc', res.data)
	
						if (!res.data) {
	
							wx.showToast({
	
								title: '发送失败',
	
								image: '../../static/images/gantanhao.png',
	
							})
	
							clearInterval(that.smdTimer)
	
							that.smsBtn = '发送验证码'
	
						} else {
	
							wx.showToast({
	
								title: '发送成功',
	
								image: '/static/images/success.png',
	
							})
	
						}
	
					},
	
				})
	
			},
	
		},
	
	
	
		onLoad(options) {
	
	
	
			var phone = this.$store.state.user.phone
	
			this.sendphone = phone
	
			var phoneRe = phone.replace(/(\d{3})\d{4}(\d{4})/, '$1****$2')
	
			this.mobile = phoneRe
	
		},
	
	}
</script>
<style lang="scss" scoped>
	.bindPhone {
	
		width: 100%;
	
		.phone {
	
			border-bottom: 1px solid #f0f4f3;
	
			height: 50px;
	
			display: flex;
	
			justify-content: space-between;
	
			align-items: center;
	
			.phone_left {
	
				label {
	
					font-size: 25rpx;
	
					padding: 20rpx;
	
				}
	
				span {
	
					font-size: 25rpx;
	
				}
	
			}
	
			.btn_con {
	
				height: 60rpx;
	
				outline: 0;
	
				button {
	
					height: 60rpx;
	
					width: 180rpx;
	
					line-height: 60rpx;
	
					font-size: 20rpx;
	
				}
	
			}
	
		}
	
		.code {
	
			.phone_left {
	
				border-bottom: 1px solid #f0f4f3;
	
				align-items: center;
	
				height: 50px;
	
				display: flex;
	
				label {
	
					font-size: 25rpx;
	
					padding: 20rpx;
	
				}
	
				input {
	
					padding-left: 20rpx;
	
				}
	
			}
	
		}
	
		.btn {
	
			width: 100%;
	
			button {
	
				width: 90%;
	
				margin: auto;
	
				margin-top: 20px;
	
				background: #ffd161;
	
			}
	
		}
	
	}
</style>
<style>
	page {
	
		background: #fff;
	
	}
</style>


